<template>
    <div class="container">
        <div id="particles-js"></div>

        <div class="content">
            <div class="glitch-wrapper">
                <div class="glitch" data-text="404">404</div>
            </div>

            <h1 class="neon-text">页面迷失在数字宇宙</h1>

            <el-button type="primary" @click="goHome()" class="hover-glow">
                <span class="button-text">返回安全地带</span>
            </el-button>

            <div class="matrix-rain"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { gsap } from 'gsap'
import 'particles.js'
import router from '@/router/index.js'
import { ElLoading } from 'element-plus'


// 粒子配置
const particlesConfig = {
    particles: {
        number: { value: 80, density: { enable: true, value_area: 800 } },
        color: { value: "#ffffff" },
        shape: { type: "circle" },
        opacity: { value: 0.5, random: false },
        size: { value: 3, random: true },
        line_linked: {
            enable: true,
            distance: 150,
            color: "#ffffff",
            opacity: 0.4,
            width: 1
        },
        move: {
            enable: true,
            speed: 6,
            direction: "none",
            random: false,
            straight: false,
            out_mode: "out",
            bounce: false
        }
    },
    interactivity: {
        detect_on: "canvas",
        events: {
            onhover: { enable: true, mode: "repulse" },
            onclick: { enable: true, mode: "push" },
            resize: true
        }
    }
}
const initParticles = () => {
    if (typeof window !== 'undefined' && window.particlesJS) {
        particlesJS('particles-js', particlesConfig)
    }
}

// 初始化动画
onMounted(() => {
    if (window.pJSDom && window.pJSDom.length > 0) {
        window.pJSDom[0].pJS.fn.vendors.destroy();
    }

    gsap.from(".glitch", {
        duration: 2,
        scale: 0.5,
        rotation: 360,
        ease: "elastic.out(1, 0.3)"
    })

    gsap.to(".neon-text", {
        duration: 1.5,
        textShadow: "0 0 10px #00f7ff, 0 0 20px #00f7ff, 0 0 30px #00f7ff",
        repeat: -1,
        yoyo: true
    })
})

// 清理
onUnmounted(() => {
    if (window.pJSDom && window.pJSDom.length > 0) {
        window.pJSDom[0].pJS.fn.vendors.destroy()
    }
})

const goHome = async () => {
    let loading;  // 定义 loading 变量

    try {
        // 显示加载状态
        loading = ElLoading.service({
            lock: true,
            text: '正在传送回主页...',
            background: 'rgba(0, 0, 0, 0.7)'
        })

        // 添加延迟确保loading可见
        await new Promise(resolve => setTimeout(resolve, 500))

        // 执行导航
        const result = await router.push('/')

        // 处理重定向结果
        if (result?.name === 'Home') {
            console.log('导航成功')
        }
    } catch (err) {
        ElMessage.error(`导航失败: ${err.message}`)
        // 回退方案
        window.location.href = '/'
    } finally {
        // 确保 loading 被正确关闭
        if (loading) {
            loading.close()
        }
    }
}
</script>

<style scoped>
.container {
    height: 100vh;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.89) 0%, rgba(0, 0, 0, 0) 70%);
    overflow: hidden;
    position: relative;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
}

.content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
}

.glitch-wrapper {
    position: relative;
}

.glitch {
    font-size: 0.2rem;
    font-weight: 700;
    color: #fff;
    position: relative;
    animation: glitch 3s infinite;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    left: 3px;
    text-shadow: -3px 0 #ff00ff;
    animation: glitch-1 2s infinite linear alternate-reverse;
}

.glitch::after {
    left: -3px;
    text-shadow: 3px 0 #00ffff;
    animation: glitch-2 2s infinite linear alternate-reverse;
}

.neon-text {
    color: #fff;
    font-size: 0.2rem;
    margin: 0.2rem 0;
    text-align: center;
}

.hover-glow {
    transition: all 0.3s;
    background: transparent;
    border: 2px solid #00f7ff;
}

.hover-glow:hover {
    box-shadow: 0 0 15px #00f7ff;
    transform: scale(1.1);
}

.button-text {
    position: relative;
    z-index: 1;
    color: #00f7ff;
}

@keyframes glitch {
    2% {
        transform: translate(2px, 0) skew(0deg);
    }

    4% {
        transform: translate(-2px, 0) skew(0deg);
    }

    96% {
        transform: translate(0, 0) skew(0deg);
    }
}

@keyframes glitch-1 {
    0% {
        clip-path: inset(20% 0 30% 0);
    }

    100% {
        clip-path: inset(10% 0 40% 0);
    }
}

@keyframes glitch-2 {
    0% {
        clip-path: inset(40% 0 10% 0);
    }

    100% {
        clip-path: inset(30% 0 20% 0);
    }
}
</style>